<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<div class="themeColors">
			<a-radio-group v-model:value="classify" >
				<a-radio value="color">{{ i18n("colorPlate","色板") }}</a-radio>
				<a-radio value="custom">{{ i18n("custom","自定义") }}</a-radio>
			</a-radio-group>
			<div v-if="classify=='color'" class="themeColors-common">
				<ul class="themeColors-common-ul" :class="{'themeColors-common-ul-hover':time.name ==key}" v-for="(time,index) in colorList" @click="colorClick(time)" :key="index">
					<li v-for="(chilid,index) in time.color" :style="'background-color:'+chilid" :key="index"></li>
					<div class="themeColors-common-ul-name">{{time.name}}</div>
					<rx-icon-show v-if="time.name ==key" class="themeColors-common-ul-icon" icon="icon-linedui"></rx-icon-show>
				</ul>
			</div>
			<div v-else class="themeColors-common-custom">
				<div class="themeColors-common-custom-list" v-for="(customTime,index) in customList" :key="index">
					<a-input v-model:value="customList[index]" class="themeColors-common-custom-color" type="color" :placeholder="i18n('customColor','自定义颜色')"/>
					<div class="themeColors-common-custom-list-name">{{i18n('colorValue','色值')}}{{index+1}}</div>
				</div>
			</div>
		</div>
	</rx-dialog>
</template>

<script>
import {Util,RxDialog} from "@lowcode/jpaas-base-lib";

export default {
	name: "ThemeColorsDialog",
	props:['destroy','colorSubject',"themeClick"],
    components:{RxDialog},
	data(){
		return{
			classify:'color',
			key:this.i18n("classic","经典"),
			colorList:[
				{
					name:this.i18n("classic","经典"),
					color:['#4285f4','#81c784','#ffb74d','#ff6464','#ff8a65','#eaff00','#00ffd8','#13aaf5','#41d4fb','#94ecfb']
				},{
					name:this.i18n("elegance",'典雅'),
					color: ['#877fa8','#f595a1','#fddb9c','#fe7156','#ffbda3','#b694ce','#f9ae91','#f59193','#d47f97','#bd86a6']
				},{
					name:this.i18n("nature",'自然'),
					color: ['#6ec88b','#fea147','#fd7f55','#eecb3c','#ff9d7d','#b3c25a','#67b580','#86ba71','#feb041','#cd7052']
				},{
					name:this.i18n("sky",'天空'),
					color: ['#408aca','#5ea8e9','#81c3fc','#71a5cb','#a1cae4','#3a5b84','#4d6e98','#7594b9','#bfd7f2','#18619f']
				},{
					name:this.i18n("commerce",'商务'),
					color: ['#12a0e7','#0663a4','#458890','#97d9cd','#4bb8bf','#20899c','#00272e','#a2c7d9','#b9dcf0','#ccedf7']
				},{
					name:this.i18n("comfortable",'舒适'),
					color: ['#76a6d4','#bcc0dd','#c0dfe4','#d8e9d6','#f0f1c7','#fdfdb9','#ffdf00','#abcb39','#c0f2e7','#e2bfd5']
				},{
					name:this.i18n("bright",'明亮'),
					color: ['#6f65ff','#0df1d8','#fe5d9d','#ffd000','#3a8dff','#04c3ea','#753af7','#ce18ff','#3a61ff','#1edbb8']
				},{
					name:this.i18n("green",'绿色'),
					color: ['#34b392','#4ac2a6','#8ed1c0','#ccdec6','#61bdb5','#7993a1','#93a889','#5e8d83','#115040','#bcc5b4']
				},{
					name:this.i18n("brown",'棕色'),
					color: ['#996430','#ba8249','#ba6a49','#d09075','#cda786','#e8ceb6','#472101','#d85611','#ddac74','#cea77e']
				},{
					name:this.i18n("color",'彩色'),
					color: ['#ff5e5e','#ff9480','#ffa17b','#ffcc93','#ffdf7d','#f3ce5b','#c7e87d','#5fdccd','#cda4f3','#f4b6d3']
				}
			],
			colorPitch:[],
			customList:['#498bf8','#81c784','#ffb74d','#ff6464','#ff8a65','#eaff00','#00ffd8','#13aaf5','#41d4fb','#94ecfb']
		}
	},
	mounted() {
		this.colorPitch = JSON.parse(JSON.stringify(this.colorSubject))
		this.init();
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"chartLang.themeColors",key);
		},
		init(){
			let color = this.colorPitch[0];
			this.key=this.themeClick(color);
			if(this.key==this.i18n("custom","自定义")){
				this.classify='custom';
				this.customList = JSON.parse(JSON.stringify(this.colorSubject))
			}
		},
		colorClick(time){
			this.colorPitch = time.color;
			this.init()
		},
		handleSubmit(){
			let array = [];
			if(this.classify =='custom'){
				array = this.customList;

			}else {
				array =this.colorPitch
			}
			Util.closeWindow(this, "ok",array);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
	}
}
</script>

<style scoped lang="less">
.themeColors-common-custom-list-name{
	font-size: 14px;
	color: #333333;
}
.themeColors-common-custom-list{
	display: flex;
	margin-bottom: 10px;
	align-items: center;
}
.themeColors-common-custom{
	border-radius: 4px;
	margin-top: 20px;
	border: solid 1px #dedede;
	padding: 10px;
}
.themeColors-common-custom-color{
	width: 80px;
	margin-right: 10px;
}
.themeColors-common-ul-icon{
	color: #4285f4;
	margin-right: 16px;
}
.themeColors{
	padding: 10px 20px 0px 20px;
	width: 100%;
}
.themeColors-common{
	border-radius: 4px;
	margin-top: 20px;
	border: solid 1px #dedede;
}
.themeColors-common-ul-hover{
	background-color: #eff5ff;
}
.themeColors-common-ul:hover{
	background-color: #eff5ff;
	cursor: pointer;
}
.themeColors-common-ul{
	display: flex;
	height: 40px;
	line-height: 40px;
	align-items: center;
	margin-bottom: 0px;
	padding-left: 10px;
	li{
		margin-right: 4px;
		width: 20px;
		height: 20px;
		background-color: #4285f4;
		border-radius: 2px;
	}
	.themeColors-common-ul-name{
		margin-left: 6px;
		font-size: 14px;
		color: #333333;
		flex: 1;
	}
}
</style>
